<script setup lang="ts">
import type Typings from "@/typings";
import service from "@/apis";
import { onMounted, ref } from "vue";
import { $confirm, $singleMsg } from "@/utils/element";
import RoleDialog from "./components/dialog.vue";

const loading = ref<boolean>(false);
const tableData = ref<Typings.Role.props[]>([]);
const pagination = ref({
  page: 1,
  size: 10,
  total: 0,
});

// 获取角色列表
const getRoleList = async () => {
  try {
    loading.value = true;
    const params = {
      page: pagination.value.page,
      size: pagination.value.size,
    };
    const {
      data: { list = [], total = 0 },
    } = await service.roleListApi(params);
    tableData.value = list;
    pagination.value.total = total;
  } finally {
    loading.value = false;
  }
};

// 弹窗 ref
const dialogRef = ref();
const controller = {
  // 添加 | 编辑 | 查看
  handleDetail: async (
    row: Partial<Typings.Role.props>,
    mode: Typings.Common.modeType = "view"
  ) => {
    await dialogRef.value.open(row, mode);

    getRoleList();
  },

  // 删除
  handleDelete: async (row: Typings.Role.props) => {
    await $confirm({ tip: "确定要删除该角色吗" });
    await service.roleRemoveApi({ id: row.id });
    $singleMsg({ message: "删除成功" });
    getRoleList();
  },
};

onMounted(() => {
  getRoleList();
});
</script>

<template>
  <div class="user-cntainer w-full h-full overflow-hidden flex flex-col">
    <div class="btn-container text-right">
      <el-button
        type="success"
        class="mb-[10px]"
        @click="controller.handleDetail({}, 'add')"
        >新增</el-button
      >
    </div>
    <div class="table-container flex-1 h-0">
      <el-table
        height="100%"
        :data="tableData"
        row-key="id"
        border
        v-loading="loading"
      >
        <el-table-column type="index" label="序号" width="60" align="center" />
        <el-table-column prop="roleName" label="名称" align="center">
          <template #default="{ row }">
            <xt-button
              type="text"
              @click="controller.handleDetail(row, 'view')"
            >
              {{ row.roleName }}
            </xt-button>
          </template>
        </el-table-column>
        <el-table-column prop="roleId" label="ID" align="center" />
        <el-table-column prop="createdTime" label="创建时间" align="center">
          <template #default="{ row }">
            {{ row.createdTime?.toTime() }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="{ row }">
            <el-button
              type="text"
              @click="controller.handleDetail(row, 'update')"
              >编辑</el-button
            >
            <el-button type="text" @click="controller.handleDelete(row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-container pt-[10px] flex flex-row justify-end">
      <xt-pagination :pagination="pagination" @change="getRoleList" />
    </div>

    <RoleDialog ref="dialogRef" />
  </div>
</template>

<style lang="scss" scoped></style>
